<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">树形

                <el-input v-model="filterText" class="w-60 mb-2" placeholder="关键字" />

                <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="data" :props="defaultProps"
                    default-expand-all :filter-node-method="filterNode" />


            </el-aside>

            <el-aside style="width: 100%;">
                <el-card style="max-width: 1280px">
                         <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="Approved by">
      <el-input v-model="formInline.user" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select
        v-model="formInline.region"
        placeholder="Activity zone"
        clearable
      >
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity time">
      <el-date-picker
        v-model="formInline.date"
        type="date"
        placeholder="Pick a date"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">搜索</el-button>
    </el-form-item>
  </el-form>

                </el-card>

            </el-aside>
        </el-container>
    </div>
</template>


<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import type { FilterNodeMethodFunction, TreeInstance } from 'element-plus'
import http from '@/http/axiosHelper';

interface Tree {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<TreeInstance>()

const defaultProps = {
    children: 'children',
    label: 'departmentName'
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
    if (!value) return true
    return data.departmentName.includes(value)
}

const data = ref([])
const getData = () => {
    http.get('/T5/Department/GetDepartmentTree').then(res => {
        data.value = res.data.data
    });
}


//forminline 
const formInline = reactive({
    GridName:'',
    ParentGridName:''
})
//表单搜索
const search=()=>{


}


onMounted(() => {
    getData();
})
</script>